<template>
  <view class="min-h-screen flex flex-col items-center bg-[#fff] pb-10">
    <view class="relative mt-28 flex flex-col items-center">
      <image
        :src="form.avatar || '../../static/defluat_head.png'"
        class="w-[200rpx] h-[200rpx] rounded-full shadow-md border-4 border-white relative z-10"
        mode="aspectFill"
        @click="uploadAvatar"
      />
    </view>

    <view class="w-10/12 mt-10 flex flex-col gap-5">
      <view
        class="bg-white rounded-2xl shadow-sm flex items-center px-4 py-3 border border-gray-100"
      >
        <input
          v-model="form.nickname"
          class="flex-1 text-gray-700 text-base outline-none"
          placeholder="请输入昵称"
          placeholder-class="text-gray-400"
        />
        <text class="qlementine-icons:user-24 text-gray-400 text-xl"></text>
      </view>

      <view
        class="bg-white rounded-2xl shadow-sm flex items-center px-4 py-3 border border-gray-100"
      >
        <input
          v-model="form.phone"
          class="flex-1 text-gray-700 text-base outline-none"
          placeholder="请输入手机号"
          placeholder-class="text-gray-400"
        />
        <text class="el:phone text-gray-400 text-xl"></text>
      </view>

      <view
        class="bg-white rounded-2xl shadow-sm flex items-center px-4 py-3 border border-gray-100"
      >
        <input
          v-model="form.age"
          class="flex-1 text-gray-700 text-base outline-none"
          placeholder="请输入年龄"
          placeholder-class="text-gray-400"
        />
        <text
          class="fluent-emoji-high-contrast:man-mage text-gray-400 text-xl"
        ></text>
      </view>

      <view
        class="bg-white rounded-2xl shadow-sm flex items-center px-4 py-3 border border-gray-100"
      >
        <picker mode="selector" :range="['男', '女']" @change="onGenderChange">
          <view class="flex-1 text-gray-700 text-base">
            {{ form.gender || '请选择性别' }}
          </view>
        </picker>
        <text class="icons8:gender text-gray-400 text-xl"></text>
      </view>

      <button
        class="w-[80%] mt-4 py-3 rounded-2xl text-white font-semibold text-base bg transition active:scale-95"
        @click="submit"
      >
        保存
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { uploadImage } from '@/utils/upload'
import { updateUser } from '@/api/user'
import { backTo } from '@/utils/unifunc'

interface FormModel {
  nickname: string
  phone: string
  age: string | number
  gender: string | number
  avatar: string
}

const userInfo: IUser = uni.getStorageSync('user')

const form = ref<FormModel>({
  nickname: userInfo.nickname || '',
  phone: userInfo.name || '',
  age: userInfo.age || '',
  gender: userInfo.gender === 1 ? '男' : '女',
  avatar: userInfo.head || ''
})

function onGenderChange(e: any) {
  const index = e.detail.value
  const options = ['男', '女']
  form.value.gender = options[index]
}

async function uploadAvatar() {
  const res = await uploadImage()
  form.value.avatar = res
}

async function submit() {
  const res = await updateUser<any, IUser>({
    nickname: form.value.nickname,
    name: form.value.phone,
    age: form.value.age,
    gender: form.value.gender === '男' ? 1 : 2,
    head: form.value.avatar,
    id: uni.getStorageSync('user').id
  })
  if (res.code === 200) {
    uni.setStorageSync('user', res.data)
    backTo()
  }
}
</script>

<style lang="scss" scoped></style>
